<template>
	<div class="consult_container">
		
		<div>
			<h3 class="header">专家资料</h3>
			<div class="prof_detail">
				<div class="prof_avatar">
					<img src="../../assets/prof.png">
				</div>
				<div class="prof_info">
					<p><span>姓名：</span>{{this.expert.name}}<p>
					<p><span>年龄：</span>{{this.expert.age}}</p>
					<p><span>教育程度：</span>{{this.expert.education}}</p>
					<p><span>简介：</span>{{this.expert.introduction}}</p>
				</div>
			</div>
		</div>
		<div v-loading="isSend">
			<h3 class="header">情感咨询<span class="tips">咨询要花费10个金豆哦</span></h3>
			<el-form :model="email"  ref="email" label-width="100px" class="email" :rules="rule">
				<el-form-item label="标题" prop="title"
				>
			    	<el-input type="text" v-model="email.title" />
			  	</el-form-item>
			  	<el-form-item label="内容" prop="content"
			  	>
			  		<el-input  type="textarea" v-model="email.content" :rows="10" />
			  	</el-form-item>
			  	<el-form-item>
		    		<el-button type="primary" @click="submit()" size="large" class="button" :loading="isSend">发送</el-button>
		  		</el-form-item>
			</el-form>

		</div>
	</div>
</template>
<script>
	export default {
		name:'consultProf',
		data(){
			return{
				email: {
					title: '',
					content: '',
				},
				expert: {
					name: '',
					age: '',
					education: '',
					introduction: ''
				},
				isSend: false,
				rule: {
					title: [
						{	required: true, 
							message: '标题不能为空',
							trigger: 'blur'
						}
					],
					content: [
						{	required: true, 
							message: '内容不能为空',
							trigger: 'blur'
						}
					]
				}
			}
		},
		methods: {
			getExpert: function() {
				this.expert = this.$route.params.expert;
			},
			submit: function() {
				//this.isSend = true;
				this.$refs["email"].validate((valid) => {
		          if (valid) {
		            this.send();
		          } else {
		            this.$message("请填写内容");
		            return false;
		          }
		        });
			},
			send: function(){
				var data = Object.assign(this.email, {
					receiver_id: this.expert.user.id,
				});
				this.$http({
				  method: 'post',
				  url: 'emoConsult/send',
				  data,
				}).then((response)=>{
					this.isSend = false;
				    if(response.data && response.data.status === 'SUCCESS'){
						const { object,message } = response.data;
						console.log(object);
						this.$message(message);
						this.$router.push({name: 'home'})
				    }else{
				    	this.$message(response.data.message);
				    }
				})
				.catch(function (error) {
				   console.log(error);
				});
			}
		},
		created: function() {
			this.getExpert();
		}
	}
</script>
<style scoped>
	.consult_container {
		padding: 10px 150px;
		margin: 10px auto;
	}
	.prof_detail {
		font-size: 0;
		padding: 30px 10px;
	}
	.header:before{
		content: url('../../assets/activityLogo.png');
		width: 100px;
		margin-right: 10px;
	}
	.prof_avatar {
		display: inline-block;
		max-height: 400px;
		width: 30%;
	}
	.prof_avatar img {
		max-height: 100%;
		max-width: 100%;
	}
	.prof_info {
		display: inline-block;
		width: 70%;
		font-size: 1.5rem;
		vertical-align: top;
	}
	.email {
		padding: 30px 5px;
	}
	.button {
		float: right;
	}
	.tips {
		font-size: 1.0rem;
		margin-left: 10px;
		color:rgba(233, 30, 99, 0.57);
	}
</style>